<template>
  <div class="showBox">
    <h2 style="text-align: center">图书借阅信息查询结果</h2>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="bookName"
        label="图书名称">
      </el-table-column>
      <el-table-column
        prop="bid"
        label="图书id">
      </el-table-column>
      <el-table-column
        prop="borrowDate"
        label="出借时间">
      </el-table-column>
      <el-table-column
        prop="dueDate"
        label="应还日期">
      </el-table-column>
      <el-table-column label="是否归还" width="90">
        <template slot-scope="scope">
          <img class="pic" v-show="scope.row.returnFlag" src="../../assets/correct.png"></img>
          <img class="pic" v-show="!scope.row.returnFlag" src="../../assets/close.png"></img>
        </template>
      </el-table-column>
      <el-table-column label="归还操作" width="90">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="bookReturn(scope.row)">归还</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
name:'TextofBookBorrow',
  data(){
  return{
    ip:"",
    token:"",
    tableData:[],
    studentReturn:{
      returnFlag:true,
      id:0,
      bid:0
    }
  }
  },
  methods:{
    bookReturn(row){
      this.studentReturn.id = row.id
      this.studentReturn.bid = row.bid
      this.studentReturn.returnFlag = false

      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');
      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/bookBorrow/',this.studentReturn).then((res)=>console.log("bookBorrowReturn",res))
      this.$axios.get((this.ip + '/bookBorrow/')).then((response)=>{
        this.tableData = undefined
        this.tableData = new Array()
        for(var i=response.data.length;i;i--){
          this.tableData.push(response.data[i-1])
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  mounted() {
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');
    this.$axios.defaults.headers.common["token"] = this.token;
    this.$axios.get((this.ip + '/bookBorrow/')).then((response)=>{
      for(var i=response.data.length;i;i--){
        this.tableData.push(response.data[i-1])
      }
    }).catch(function (error) {
      console.log(error);
    });
  },
}
</script>

<style scoped>
.showBox{
  padding-top: 30px;
  margin: 30px 30px 0px;
}
.pic{
  width: 20px;
  height: 20px;
}
</style>
